<script setup lang="ts">
import { reactive, ref } from 'vue'
import PageWrapper from '@/components/page-wrapper.vue'
import TableList from '@/components/table-list.vue'
import DialogSearch from './components/dialog-search.vue'

const dialogSearchRef = ref<InstanceType<typeof DialogSearch>>()

// 表格配置
const columns = [
    { title: '#', slotName: 'rowNum', fixed: 'left', align: 'center', width: 60 },
    { title: '规则名称', slotName: 'f1' },
    { title: '描述', dataIndex: 'f2' },
    { title: '服务调用次数', dataIndex: 'f3' },
    { title: '状态', slotName: 'f4' },
    { title: '上次调度时间', dataIndex: 'f5' },
    { title: '操作', slotName: 'oprations', align: 'center', width: 150 }
]
const tableData = [
    { f1: 'TradeCode 99', f2: '这是一段描述', f3: '912万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 98', f2: '这是一段描述', f3: '565万', f4: '异常', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 97', f2: '这是一段描述', f3: '373万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 96', f2: '这是一段描述', f3: '663万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 95', f2: '这是一段描述', f3: '215万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 94', f2: '这是一段描述', f3: '912万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 93', f2: '这是一段描述', f3: '565万', f4: '关闭', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 92', f2: '这是一段描述', f3: '373万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 91', f2: '这是一段描述', f3: '663万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 90', f2: '这是一段描述', f3: '215万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 89', f2: '这是一段描述', f3: '912万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 88', f2: '这是一段描述', f3: '565万', f4: '异常', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 87', f2: '这是一段描述', f3: '373万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 86', f2: '这是一段描述', f3: '663万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 85', f2: '这是一段描述', f3: '215万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 84', f2: '这是一段描述', f3: '912万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 83', f2: '这是一段描述', f3: '565万', f4: '关闭', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 82', f2: '这是一段描述', f3: '373万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 81', f2: '这是一段描述', f3: '663万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 80', f2: '这是一段描述', f3: '215万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 79', f2: '这是一段描述', f3: '912万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 78', f2: '这是一段描述', f3: '565万', f4: '异常', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 77', f2: '这是一段描述', f3: '373万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 76', f2: '这是一段描述', f3: '663万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 75', f2: '这是一段描述', f3: '215万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 74', f2: '这是一段描述', f3: '912万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 73', f2: '这是一段描述', f3: '565万', f4: '关闭', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 72', f2: '这是一段描述', f3: '373万', f4: '运行中', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 71', f2: '这是一段描述', f3: '663万', f4: '已上线', f5: '2023-10-27 12:26:59' },
    { f1: 'TradeCode 70', f2: '这是一段描述', f3: '215万', f4: '运行中', f5: '2023-10-27 12:26:59' }
]
const rowSelection = { type: 'checkbox', showCheckedAll: true }

const state = reactive({
    selectedKeys: []
})

const onSearchClick = () => {
    dialogSearchRef.value?.open()
}
</script>

<template>
    <page-wrapper>
        <table-list
            v-model:selected-keys="state.selectedKeys"
            :columns="columns"
            :data="tableData"
            row-key="f1"
            :row-selection="rowSelection"
        >
            <template #rowNum="{ rowIndex }">
                {{ rowIndex + 1 }}
            </template>
            <template #f1="{ record }">
                <a-link href="#" :hoverable="false">
                    {{ record.f1 }}
                </a-link>
            </template>
            <template #f4="{ record }">
                <a-tag v-if="record.f4 == '已上线'" color="green">{{ record.f4 }}</a-tag>
                <a-tag v-if="record.f4 == '异常'" color="red">{{ record.f4 }}</a-tag>
                <a-tag v-if="record.f4 == '运行中'" color="blue">{{ record.f4 }}</a-tag>
                <a-tag v-if="record.f4 == '关闭'" color="gray">{{ record.f4 }}</a-tag>
            </template>
            <template #oprations>
                <a-space :size="20">
                    <a-link href="#" :hoverable="false">配置</a-link>
                    <a-link href="#" :hoverable="false">订阅报警</a-link>
                </a-space>
            </template>
        </table-list>
        <template #footer-left>
            <a-button type="primary" @click="onSearchClick">查询</a-button>
            <a-divider direction="vertical" />
            <a-button>导入</a-button>
            <a-button>导出</a-button>
        </template>
        <template #footer-right>
            <a-pagination
                :total="1000000"
                size="small"
                show-total
                show-jumper
                show-page-size
                :page-size-options="[30, 50, 100]"
                :default-page-size="30"
            />
        </template>
    </page-wrapper>
    <dialog-search ref="dialogSearchRef" />
</template>
